<script setup lang="jsx">
  import {watch,inject,provide,ref,nextTick,reactive,computed} from 'vue'
import waybillCar from '@/api/abroad/waybillCar'
import waybillTrayList from '@/api/abroad/waybillTrayList'
import { Message, Modal } from '@arco-design/web-vue'
import ButtonGroup from "@cps/actionsNew/buttonGroup.vue";
import dicthelpApi from "@/api/dicthelpApi.js";
import {getDictData} from "@/utils/crud/dictNew.js";
const columnsDist = inject('columnsDist')
const crudRef = ref()
const selectedTrayList=ref([])
const selectedShipment=ref([])
const tabKey=ref('1')
//table 选择
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
})
// const filterList=(list)=>{
//   if(tabKey.value=='1'){
//    return list.filter(c=>c.car_id==0)
//   }else{
//    return list.filter(c=>c.car_id>0)
//   }
// }
//tabs切换
const tabsChang=(e)=>{
  tabKey.value=e
  if(e=='1'){
    trayListParams.in_car='0'
    shipmentListParams.in_car='0'

  }else if(e=='2'){
    trayListParams.in_car='1'
    shipmentListParams.in_car='1'
  }
  tableListAll()
}
const trayList=ref([])
const shipmentList=ref([])
//行数选中
const setSelecteds = (key,type) => {
  if(type==1){
    selectedTrayList.value = key
  }else{
    selectedShipment.value = key
  }
}

//运单总页数
const shipmentListInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
//托盘总页数
const trayListInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
  //托盘请求数据
const trayListParams=reactive({
  scence:'list',
  page: 1,
  in_car: '0',
  pageSize: 10,
  })
    //运单请求数据
const shipmentListParams=reactive({
  scence:'shipment',
  in_car: '0',
  page: 1,
  pageSize: 10,
  })
    //切换分页
const pageChange=(e,type)=>{
  if(type==1){
    trayListParams.page=e
    waybillTrayListCarData()
  }else if(type==2){
    shipmentListParams.page=e
    waybillListCarData()
  }
}
  //切换条数
const pageSizeChange=(e,type)=>{
  if(type==1){
    trayListParams.pageSize=e
    waybillTrayListCarData()
  }else if(type==2){
    shipmentListParams.pageSize=e
    waybillListCarData()
  }
}
const columnsTrayList = ref([
  {title: '托盘编号', dataIndex: 'number',width:70,hide:true,align:'center'},
  {title: '提单号/入仓号', dataIndex: 'tray.order.number',width:180,align:'center',hide:true,},
  {title: '柜号', dataIndex: 'tray.order.container_no',width:70,hide:true,},
  {title: '目的地', dataIndex: 'address_desc',slotName: 'address_desc',width:70,align:'center',hide:true,},
  {title: '服务类型', dataIndex: 'service_type_id',slotName: 'service_type_id',width:150,align:'center',hide:true,},
  {title: 'ETA/入仓时间', dataIndex: 'tray.unpacking_at',width:150,align:'center',hide:true,},
  // {title: '操作', slotName: 'fixed',fixed: 'right',width: 70,align:'center',},

])
const columnsShipment = ref([  
  {title: '入库日期', dataIndex: 'shipment.unpacking_at',width:150,align:'center',hide:true,},
  {title: '服务类型', dataIndex: 'service_type_id',slotName: 'service_type_id',width:150,align:'center',hide:true,},
{title: '目的地', dataIndex: 'address_desc',slotName: 'address_desc',width:70,align:'center',hide:true,},
  {title: '箱唛', dataIndex: 'shipment.shipment_no',width:100,align:'center',hide:true,},
  {title: '柜号', dataIndex: 'shipment.container_no',width:100,align:'center',hide:true,},
  {title: '箱数', dataIndex: 'count',width:100,align:'center',hide:true,},
  {title: '入库重量', dataIndex: 'shipment.weight',width:100,align:'center',hide:true,},
  {title: '库存CBM', dataIndex: 'shipment.volume',width:100,align:'center',hide:true,},
  {title: '库龄/天', dataIndex: 'shipment.age',width:100,align:'center',hide:true,},
  // {title: '操作', slotName: 'fixed',fixed: 'right',width: 70,align:'center',},
]);
//列表
const tableList = (tray_list) => {
  if(tray_list){
    waybillTrayListCarData()
  }else{
    waybillListCarData()
  }
}
const tableListAll = () => {
  waybillListCarData()
  waybillTrayListCarData()
}
     //运单
    const waybillListCarData=()=>{
      waybillCar.waybillListCar(shipmentListParams).then(res => {
        shipmentList.value=res.data.items
        shipmentListInfo.value= res.data.pageInfo
        selectedShipment.value=[]
        })
    }
     //托盘
    const waybillTrayListCarData=()=>{
      waybillCar.waybillTrayListCar(trayListParams).then(res => {
        trayList.value=res.data.items
        trayListInfo.value= res.data.pageInfo
        selectedTrayList.value=[]

      })
    }
   
const visible = ref(false)
  const onShow = async (value) => {
    visible.value = true
     //编辑
     if(value){
      if(value.car){
        shipmentListParams.send_id=value.id
        trayListParams.send_id=value.id
      }else{
        shipmentListParams.car_id=value.id
        trayListParams.car_id=value.id
      }
      waybillListCarData()
      waybillTrayListCarData()
    }
    
  }
const emits = defineEmits(['addClick','emitClick'])

    const close = () => {
      visible.value = false
      trayList.value=[]
      shipmentList.value=[]
      selectedShipment.value=[]
      selectedTrayList.value=[]
      shipmentListParams.page=1
      shipmentListParams.in_car='0'
      trayListParams.page=1
      trayListParams.in_car='0'
      tabKey.value='1'
    }
    const buttonGroups = [
    {
      title: '上车',
      api: waybillTrayList.carin,
      auth: ['sea:waybillTrayList:carin'],
      hideStatus: [2]
    },{
    title: '移除出库单',
    api:waybillTrayList.deleteTask,
    auth: ['sea:waybillTrayList:deleteTask'],
    hideStatus: [2]
  },{
      title: '下车',
      api: waybillTrayList.carout,
      auth: ['sea:waybillTrayList:carout'],
      hideStatus: [1],
      form: {
        form: {
          count: 1,
        },
      columns: [
          {
              title: '数量', dataIndex: 'count', formType: 'input-number',min:1,
              rules: {required: true, message: "请输入数量"},
            }
          ]
        }
    },
]
provide('tableList',tableList);
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" v-if="visible" width="80%" @cancel="close">
    <template #title>装车</template>
        <a-tabs default-active-key="1" @change="tabsChang">
          <a-tab-pane key="1" title="未装车"></a-tab-pane>
          <a-tab-pane key="2" title="已装车"></a-tab-pane>
        </a-tabs>  
        <div style="display: flex;margin: 8px 0;">
          <button-group :button-groups="buttonGroups" :dataList="trayList" :crud-ref="crudRef" :selected="selectedTrayList"
                        :currentStatus="tabKey"/>
        </div>
        <a-table ref="trayListTableRef"  row-key="id" :columns="columnsTrayList" :data="trayList" :bordered="false"  size="mini" v-model:selectedKeys="selectedTrayList" @selection-change="setSelecteds($event,1)" stripe :row-selection="rowSelection" column-resizable :pagination="false">
              <template #service_type_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.tray.service_type_id,3,columnsDist) }}</template> 
            <template #address_desc="{ record }">{{record.tray?.address_desc}}</template>

          </a-table>
            <!-- 分页 -->
        <div class="foot-list">
          <a-pagination
              v-show="trayListInfo.total > 10" 
              :total="trayListInfo.total"
              show-total show-jumper show-page-size     
              v-model:current="trayListParams.page"
              @change="pageChange($event,1)"
              @page-size-change="pageSizeChange($event,1)"
              :page-size-options="[10, 20, 30, 50, 100]"
              :page-size="trayListParams.pageSize"
              style="display: inline-flex"
          />
        </div>
      <div style="display: flex;margin: 8px 0;">
        <button-group :button-groups="buttonGroups" :dataList="shipmentList" :crud-ref="crudRef" :selected="selectedShipment"
                      :currentStatus="tabKey"/>
      </div>
      <a-table ref="shipmentTableRef" row-key="id" :columns="columnsShipment" :data="shipmentList" :bordered="false"  size="mini" v-model:selectedKeys="selectedShipment" @selection-change="setSelecteds($event,2)" stripe :row-selection="rowSelection" column-resizable :pagination="false">
              <template #service_type_id="{ record }">{{getDictData('attrApi','dicthelpApi_waybillServiceShipmentTypeList',record.tray.service_type_id,3,columnsDist) }}</template>
            <template #address_desc="{ record }">{{record.tray?.address_desc}}</template>
          </a-table>
          <div class="foot-list">
      <a-pagination
          v-show="shipmentListInfo.total > 10"       
          :total="shipmentListInfo.total"
          show-total show-jumper show-page-size     
          v-model:current="shipmentListParams.page"
          @change="pageChange($event,2)"
          @page-size-change="pageSizeChange($event,2)"
          :page-size-options="[10, 20, 30, 50, 100]"
          :page-size="shipmentListParams.pageSize"
          style="display: inline-flex"
      />
    </div>
        <template #footer> 
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
              <!-- tips：先选择"服务项目"后在操作明细,请按要求填写(导入)单据信息 -->
            </div>
            <div>
              <a-button @click="visible = false" style="margin-right: 20px;">关闭</a-button>
              <!-- <a-button type="primary" @click="handleBeforeOk(formRef)">
                保存
              </a-button> -->
            </div>
          </div>       
        </template>
      </a-drawer>
</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
</style>